<template>
  <div>
    <div v-if="isShow" @click="returnTop" class="back-top" :style="{ bottom: bottom + 'px', right: right + 'px' }">
      <van-icon name="back-top" />
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  props: {
    bottom: {
      type: [Number, String],
      default: 70,
    },
    right: {
      type: [Number, String],
      default: 50,
    },
    distance: {
      type: [Number, String],
      default: 50,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    returnTop() {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
    handler() {
      console.log("scroll");
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop);

      this.isShow = scrollTop > this.distance;
    },
  },
  mounted() {
    // console.log(this.style);
    let thorttleBackTop = _.throttle(this.handler, 500);
    document.addEventListener("scroll", thorttleBackTop);
  },
  //当组件被销毁之前，要解除事件绑定
  beforeUnmount() {
    document.removeEventListener("scroll", this.handler);
  },
};
</script>

<style scoped>
.back-top {
  position: fixed;
  font-size: 30px;
  background: #fff;

  /* bottom: 50px;
	right: 50px; */
}
</style>
